<!-- 202230163014仇心怡 -->

<template>
	<!-- 一个 Element Plus 提供的卡片容器，通常用于包含信息和功能模块 -->
    <el-card>
		<!-- 布局容器，用于在其中放置不同区域的组件 -->
      <el-container>
		  <!-- 卡片的头部部分 -->
        <el-header>
			<!-- 点击按钮会触发显示新增用户的对话框 -->
          <el-button type="primary" @click="showAddModal = true">新增用户</el-button>
        </el-header>
		<!-- 卡片的主体部分 -->
        <el-main>
			<!-- 定义一个表格并且绑定数据源 -->
          <el-table :data="userList" style="width: 100%">
			  <!-- 定义表格的列，分别显示用户的 id、username（用户名）、password（密码）和 type（用户类型） -->
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column prop="password" label="密码"></el-table-column>
            <el-table-column prop="type" label="用户类型">
				<!-- 在“用户类型”列中，根据 row.type 的值渲染不同的 <el-tag>，显示 普通用户 或 管理员 -->
              <template #default="{ row }">
                <el-tag v-if="row.type === 0">普通用户</el-tag>
                <el-tag v-if="row.type === 1">管理员</el-tag>
              </template>
            </el-table-column>
			<!-- 包含两个按钮：编辑 和 删除，分别绑定到 showEditModal2(row) 和 deleteUser(row) 方法 -->
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-button type="text" @click="showEditModal2(row)">编辑</el-button>
                <el-button type="text" @click="deleteUser(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
		
		<!-- 展示新增用户的表单
		绑定 showAddModal 变量，控制对话框的显示与隐藏 -->
        <el-dialog title="新增用户" v-model="showAddModal">
			<!-- 用户信息的输入字段，包括用户名、密码和用户类型 -->
          <el-form :model="addForm">
            <el-form-item label="用户名">
              <el-input v-model="addForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="addForm.password"></el-input>
            </el-form-item>
            <el-form-item label="用户类型">
				<!-- 选择用户类型（普通用户或管理员） -->
              <el-select v-model="addForm.type" placeholder="请选择">
                <el-option
                  v-for="item in types"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="showAddModal = false">取消</el-button><!-- 关闭对话框 -->
            <el-button type="primary" @click="addUser">确定</el-button><!-- 调用 addUser 方法 -->
          </div>
        </el-dialog>
		
		<!-- 编辑用户信息 -->
        <el-dialog title="编辑用户" v-model="showEditModal">
          <el-form :model="editForm">
            <el-form-item label="用户名">
              <el-input v-model="editForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="editForm.password"></el-input>
            </el-form-item>
            <el-form-item label="用户类型">
              <el-select v-model="editForm.type" placeholder="请选择">
                <el-option
                  v-for="item in types"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="showEditModal = false">取消</el-button>
            <el-button type="primary" @click="editUser">确定</el-button>
          </div>
        </el-dialog>
      </el-container></el-card
    >
  </template>
  
  <script setup>
	  // 引入 ref，用来创建响应式数据
  import { ref } from "vue";
  import http from "../utils/http";
  
  // 引入 ref，用来创建响应式数据
  const userList = ref([]);
  //控制新增用户对话框的显示
  const showAddModal = ref(false);
  //控制编辑用户对话框的显示
  const showEditModal = ref(false);
  
  //控制编辑用户对话框的显示
  const types = ref([
    { value: 0, label: "普通用户" },
    { value: 1, label: "管理员" },
  ]);
  //存储新增用户和编辑用户的表单数据
  const addForm = ref({
    username: "",
    password: "",
    type: "",
  });
  const editForm = ref({
    id: "",
    username: "",
    password: "",
    type: "",
  });
  
  //异步方法，向服务器发送 GET 请求获取用户列表，并将返回的用户数据赋值给 userList
  const getUserList = async () => {
    const res = await http.get("/list");
    if (res.data.code === 0) {
      userList.value = res.data.data;
    }
  };
  
  //异步方法，向服务器发送 POST 请求添加新用户，若成功则关闭新增对话框并重新获取用户列表，否则弹出错误信息
  const addUser = async () => {
    const res = await http.post("/add", addForm.value);
    if (res.data.code === 0) {
      showAddModal.value = false;
      getUserList();
    } else {
      alert(res.data.msg);
    }
  };
  
  //当点击编辑按钮时，将选中的用户信息复制到 editForm 中，并显示编辑对话框
  const showEditModal2 = (user) => {
    editForm.value = { ...user };
    showEditModal.value = true;
  };
  
  //异步方法，向服务器发送 POST 请求更新用户信息，若成功则关闭编辑对话框并重新获取用户列表，否则弹出错误信息
  const editUser = async () => {
    const res = await http.post("/edit", editForm.value);
    if (res.data.code === 0) {
      showEditModal.value = false;
      getUserList();
    } else {
      alert(res.data.msg);
    }
  };
  
  // 异步方法，向服务器发送 POST 请求删除用户，若成功则重新获取用户列表，否则弹出错误信息
  const deleteUser = async (user) => {
    const res = await http.post("/del", { id: user.id });
    if (res.data.code === 0) {
      getUserList();
    } else {
      alert(res.data.msg);
    }
  };
  
  getUserList();
  </script>
  